<template>
  <div class="container">
    <!-- 顶部导航 -->
    <van-nav-bar title="网易严选" left-arrow>
      <template #left>
        <van-icon name="wap-home-o" size="32" color="#2b382f" @click="toHome" />
      </template>
      <template #right>
        <van-icon name="search" size="32" color="#2b382f" @click="toSearch" />
        <van-icon name="cart-o" size="32" color="#2b382f" @click="toCart" />
      </template>
    </van-nav-bar>

    <!-- 标签页 -->
    <van-tabs v-model:active="activeIndex" @click-tab="changeTitle">
      <van-tab v-for="item in categoryL2List" :key="item.id" :title="item.name" :name="item.id">
        <div class="topTitle">
          <p>{{ item.frontDesc }}</p>
        </div>
      </van-tab>
    </van-tabs>
    <ul class="imgList">
      <li class="imgItem" v-for="value in categoryItems?.itemList" :key="value.id" @click="toDetail">
        <img :src="value.listPicUrl" />
        <p class="imgName">{{ value.name }}</p>
        <p class="redpack" v-for="red in value.itemTagList" :key="red.itemId">
          <span>
            <img class="logo" src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" alt="" />
            {{ red.name }}
          </span>
        </p>
        <p class="price">
          <span>{{ value.finalPriceInfoVO.priceInfo.finalPrice?.prefix }}￥</span>
          <span> {{ value.finalPriceInfoVO.priceInfo.finalPrice?.price ?
            value.finalPriceInfoVO.priceInfo.finalPrice?.price : value.finalPriceInfoVO.priceInfo.basicPrice }}</span>
          <del v-show="!value.finalPriceInfoVO.priceInfo.basicPrice">
            ￥{{ value.finalPriceInfoVO.priceInfo.counterPrice }}
          </del>
        </p>
        <p class="coupon" :style="value.finalPriceInfoVO.banner?.content ? 'backgroundColor: #ffe9eb' : ''">
        <p>
          <span class="xianshi" v-show="value.finalPriceInfoVO.banner?.title">{{ value.finalPriceInfoVO.banner?.title
          }}</span>
          <span class="tehui">{{ value.finalPriceInfoVO.banner?.content }}</span>
        </p>
        </p>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { reqCateList } from '@/api/category'
import type { IReqCategory, IcategoryItems, categoryListItem } from '@/types/category'

const router = useRouter()
const route = useRoute()

const activeIndex = ref(0)

const categoryL2List = ref<categoryListItem[]>([])

const categoryItems = ref<IcategoryItems>()

const params = ref<IReqCategory>({
  __timestamp: 1691403418119,
  categoryId: 11,
  subCategoryId: 111,
  categoryType: 0
})

const getCateList = async () => {
  const { categoryId, subCategoryId, categoryType } = route.query
  params.value.subCategoryId = Number(subCategoryId)
  params.value.categoryId = Number(categoryId)
  params.value.categoryType = Number(categoryType)
  const {
    data: { data }
  } = await reqCateList(params.value)
  categoryL2List.value = data.categoryL2List
  categoryItems.value = data.categoryItems
}

//#region 顶部按钮
const toHome = () => {
  router.push('/home')
}
const toSearch = () => {
  router.push('/search')
}
const toCart = () => {
  router.push('/cart')
}
//#endregion

const changeTitle = async (e: any) => {
  console.log(e);
  params.value.subCategoryId = e.name
  const { categoryId, categoryType } = route.query
  params.value.categoryId = Number(categoryId)
  params.value.categoryType = Number(categoryType)
  const {
    data: { data }
  } = await reqCateList(params.value)
  categoryL2List.value = data.categoryL2List
  categoryItems.value = data.categoryItems
}
const toDetail = () => {
  router.push('/detail')
}
onMounted(() => {
  getCateList()
})
</script>

<script lang="ts">
export default {
  name: 'MyList'
}
</script>

<style lang="less" scoped>
.container {
  position: relative;
  font-size: 14px;
  background-color: #eee !important;
}

p {
  padding: 0;
  margin: 0;
}

// 顶部导航
:deep(.van-nav-bar .van-hairline--bottom) {
  height: 44px;
  box-sizing: border-box;
}

:deep(.van-nav-bar__content) {
  position: fixed;
  top: 0;
  width: 100%;
  height: 44px;
  background-color: #fafafa;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}

:deep(.van-address-item) {
  padding: 10px !important;
}

// 标签页
:deep(.van-tabs) {
  position: fixed;
  top: 0;
  background-color: #fff;
  margin-top: 44px;
}

.topTitle {
  position: relative;
  width: 375px;
  height: 55px;
  margin-top: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  &>p {
    width: 126px;
    height: 13.5px;
  }
}

.imgList {
  margin-top: 160px;
  background-color: #fff;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;

  .imgItem {
    width: 172.5px;
    height: 279.5px;
    padding: 0 5px 26px 10px;

    img {
      border-radius: 5%;
      width: 172.5px;
      height: 172.5px;
    }

    .imgName {
      font-size: 14px;
      margin-top: 6px;
    }

    .redpack {
      height: 30px;
      margin-top: 4px;

      span {
        border: 0.8px solid rgba(51, 51, 51, 0.2);
        border-bottom-left-radius: 11.5px;
        border-bottom-right-radius: 11.5px;

        .logo {
          width: 10px;
          height: 10px;
        }
      }
    }

    .price {
      height: 30px;
      color: rgb(250, 30, 50);

      & span:nth-child(2) {
        font-size: 20px;
        font-weight: bold;
      }

      & del:nth-child(3) {
        color: rgb(153, 153, 153);
      }
    }

    .coupon {
      height: 23px;
      margin-top: 5px;

      p {
        width: 166.5px;
        padding-left: 6px;
        height: 19px;

        & span:nth-child(1) {
          width: 60px;
          box-sizing: border-box;
          border-radius: 32px;
          padding: 2px 6px;
          display: inline-block;
          background-color: rgb(250, 30, 50);
          color: white;
        }

        & span:nth-child(2) {
          color: rgb(250, 30, 50);
        }
      }
    }
  }
}
</style>
